<template>
  <div>
    <img src="../assets/5c9a06679a33e.gif" alt="" style="width:100%;display: block;">
    <img :src="verifycode" alt="" style="width:100%;height:100%;">
  </div>
</template>

<script>
  import {getuserinfo} from "../api/api";
  import aestool from '@/utils/aestool.js';

  export default {
    name: "generate_img",
    data() {
      return {
        verifycode: "",
        userinfodata: {},
      }
    },
    methods: {
      //获取用户信息
      getUserData() {
        getuserinfo().then(res => {
          if (res.data.Status == 200) {
            sessionStorage.setItem('useinfo', aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            this.userinfodata = JSON.parse(aestool.decrypt(res.data.Data, '123456asdzxcqwe0'))
            this.getCodes()
          }
        })
      },
      //二维码
      getCodes() {
        this.$axios.get('/api/v1/generate_img', {
          responseType: 'arraybuffer'
        }).then(res => {
          return this.verifycode = 'data:image/png;base64,' + btoa(
            new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        });
      }
    },
    created() {
      this.getUserData()
    }
  }
</script>

<style scoped>
  .generate_img {
    /*background:url("https://bansu-zhibo.oss-cn-hangzhou.aliyuncs.com/zhuanqian.png");*/
    /*background-size:100% 100%;*/
    width: 100%;
    height: 100%;
  }

  .images {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 20%;
    left: 38%;
  }
</style>
